import { useGlobalData } from "@/pages/BigScreen/context/chat";
import styles from "./index.module.less";
import { Input, Modal } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import cName from "classnames";
import { useContext, useState } from "react";
import { BigScreenContext } from "@/pages/BigScreen/context/BigScreenContext";

interface IProps {
  info: any;
  selectTalk: any;
  onHandleChangeTalk: (type: any, selectTalk?: any, cb?: any) => void;
  handleChangeSession: (item) => void;
  selected?: boolean;
  currentTask?: any;
  updateSession: any;
  setCurrentTask: (item) => void;
}

const ChatGroupItem = (props: IProps) => {
  const {
    info,
    selectTalk,
    currentTask,
    onHandleChangeTalk,
    handleChangeSession,
    updateSession,
    setCurrentTask,
  } = props;
  const { clearChatMemo } = useGlobalData();
  const { initNavList, setCurrentKey } = useContext(BigScreenContext);

  const [editing, setEditing] = useState<boolean>(false);

  const [modal, contextHolder] = Modal.useModal();
  const onDelete = () => {
    console.log("onDelete");

    modal.confirm({
      title: "删除",
      icon: <ExclamationCircleOutlined />,
      content: "确认删除该条记录吗？",
      okText: "确定",
      cancelText: "取消",
      cancelButtonProps: {
        type: "default",
      },
      okButtonProps: {
        type: "primary",
      },
      onOk: () => {
        console.log("ok");
        onHandleChangeTalk("del", info);
      },
    });
  };
  return (
    <div
      className={cName(styles["chat-group-item"], {
        [styles["active"]]: selectTalk?.id === info?.id,
      })}

    >
      <div
        className={cName(styles["title"])}
      >
        {editing ? (
          <Input
            style={{ border: "none" }}
            value={currentTask?.content ?? ""}
            onChange={(e) => {
              setCurrentTask({
                ...currentTask,
                content: e.target.value.trim(),
              });
            }}
          ></Input>
        ) : (
          <div style={{ width: '100%' }}
            onClick={() => {
              if (selectTalk?.id !== info?.id) {
                clearChatMemo();
                onHandleChangeTalk("select", info, () => {
                  // 重置 nav
                  setCurrentKey("question");
                  initNavList();
                  handleChangeSession(info);
                });
              }
            }}
          >

            {
              info?.content
            }
          </div>

        )}
      </div>
      {editing ? (
        <div className="group-item-edit">
          <div
            className="opera-item"
            onClick={() => {
              setEditing(false);
              // onUpdate();
              updateSession();
            }}
          >
            <i className="iconfont icon-check-circle"></i>
          </div>
          <div
            className="opera-item"
            onClick={() => {
              setEditing(false);
            }}
          >
            <i className="iconfont icon-close-circle"></i>
          </div>
        </div>
      ) : (
        <div className="group-item-opera">
          <div
            className="opera-item group-item-opera-edit"
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              setCurrentTask(info);
              setEditing(true);
            }}
          >
            <i className="iconfont icon-edit-square"></i>
          </div>
          <div
            className="opera-item group-item-opera-delete"
            onClick={(e) => {
              e.stopPropagation();
              e.preventDefault();
              onDelete();
            }}
          >
            <i className="iconfont icon-delete"></i>
          </div>
        </div>
      )}

      {contextHolder}
    </div>
  );
};
export default ChatGroupItem;
